{{ if .enable }}
  <section class="content-section testimonials-section">
    <div class="container">
      <div class="row">
        <div class="section-title">
          <h2>{{ .title | markdownify }}</h2>
        </div>
      </div>
      <div class="row row-cols-1 row-cols-md-3 g-4">
        {{ range site.Data.testimonials }}
          <div class="col">
            {{/* Margin-top & margin-bottom are set to match Tweets. Maybe there's
              a better way of designing this? (and maybe we design from the stylesheet?)
            */}}
            {{ with .quote }}
              <div class="card quote">
                {{ if .link }}
                  <a
                    class="quote-text"
                    href="{{ .link }}"
                    rel="noopener"
                    target="_blank"
                  >
                    {{ .text }}
                    <span> — {{ .author }} </span>
                  </a>
                {{ else }}
                  <p class="quote-text">
                    {{ .text }}
                    <span> — {{ .author }} </span>
                  </p>
                {{ end }}
              </div>
            {{ end }}
            {{ with .tweet }}

              <div class="card tweet">
                <div class="tweet-header">
                  <div class="tweet-author">
                    <svg
                      class="tweet-logo"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      aria-hidden="true"
                      role="img"
                      width="32"
                      height="32"
                      preserveAspectRatio="xMidYMid meet"
                      viewBox="0 0 24 24"
                    >
                      <path
                        fill="currentColor"
                        d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"
                      ></path>
                    </svg>
                    {{/* The Firefox tracking protection blocks images hosted on pbs.twitter.com, see https://bugzilla.mozilla.org/show_bug.cgi?id=1458915
                      So we just download the images when building the website.
                    */}}
                    {{ $imageSrc := (resources.GetRemote "https://abs.twimg.com/sticky/default_profile_images/default_profile_normal.png" | resources.Copy "default.png").RelPermalink }}
                    {{ $localImgPath := printf "cached-avatars/%s.png" .screen_name }}
                    {{ with resources.GetRemote .profile_image_url_https }}
                      {{ $imageSrc = (resources.Copy $localImgPath .).RelPermalink }}
                    {{ else }}
                      {{ warnf "[section-testimonials.html] couldn't fetch remote image %v" .profile_image_url_https }}
                    {{ end }}
                    <img class="tweet-author-image" src="{{ $imageSrc }}" />
                    <div class="tweet-author-info">
                      <p class="tweet-author-name">{{ .name }}</p>
                      <a
                        class="tweet-author-handler"
                        target="_blank"
                        href="{{ .profile_url }}"
                        >@{{ .screen_name }}</a
                      >
                    </div>
                  </div>
                </div>

                <div class="mt-2">
                  {{ .text }}
                </div>

                <span class="flex-grow-1"></span>

                <div class="tweet-info d-flex pt-2 text-muted">
                  <svg
                    class="tweet-info-favourite"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                  >
                    <path
                      class="fill-current"
                      d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.813-1.148 2.353-2.73 4.644-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.375-7.454 13.11-10.037 13.156H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.035 11.596 8.55 11.658 1.52-.062 8.55-5.917 8.55-11.658 0-2.267-1.822-4.255-3.902-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.015-.03-1.426-2.965-3.955-2.965z"
                    ></path>
                  </svg>
                  <span class="ms-1">{{ .favorite_count }}</span>
                  <div class="ms-3">
                    {{ .created_at | time.Format "15:04 · Jan 2, 2006" }}
                  </div>
                  <span class="flex-grow-1"></span>
                  <a href="{{ .url }}">Twitter</a>
                </div>
              </div>
            {{ end }}
          </div>
        {{ end }}
      </div>
    </div>
  </section>
{{ end }}
